<template>
  <div>
    <div class="header">
      <h4>订单总量</h4>
      <span class="time">2023-3 - 2023-8</span>
    </div>
    <div class="content">
      <p>单位：笔</p>
    </div>
    <div class="display">
      <div class="item">
        <span class="num">{{ Number(list.orderMaxNumber).toLocaleString() }}</span>
        <p>订单最高值</p>
      </div>
      <div class="item">
        <span class="num">{{ Number(list.orderAverageNumber).toLocaleString() }}</span>
        <p>订单平均值</p>
      </div>
      <div class="item">
        <span class="num">{{ Number(list.orderMinNumber).toLocaleString() }}</span>
        <p>订单最低值</p>
      </div>
    </div>
    <div class="area" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
export default {
  computed: {
    ...mapGetters('dashboard', ['listData']),
    list() {
      return this.listData.orderLineChart ? this.listData.orderLineChart : {}
    }
  },
  watch: {
    list: {
      deep: true,
      handler() {
        const area = echarts.init(document.querySelector('.area'))
        // 绑定数据和配置项并渲染
        const Xdata = this.list.monthlyOrderList.map(item => item.dateTime)
        const Ydata = this.list.monthlyOrderList.map(item => item.orderNumber)
        area.setOption(this.fn(Xdata, Ydata))
      }
    }
  },
  methods: {
    fn(Xdata, Ydata) {
      return {
        backgroundColor: '#FFF',
        grid: {
          top: '9%',
          bottom: '19%',
          left: '10%',
          right: '4%'
        },
        tooltip: {
          trigger: 'axis',
          label: {
            show: true
          },
          formatter: function(params) {
            const date = params[0].axisValue
            var value = params[0].data

            // 使用 <br> 标签实现日期和订单总量的换行显示
            return `订单总量：${date}<br>订单总量：${value}`
          },
          // 自定义提示框样式
          textStyle: {
            whiteSpace: 'pre-wrap'
          }
        },
        xAxis: {
          boundaryGap: true, // 默认，坐标轴留白策略
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          data: Xdata
        },
        yAxis: {
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(33,148,246,0.2)'
            }
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: 'rgb(245,250,254)'
            }
          }
        },
        series: [{
          type: 'line',
          symbol: 'circle',
          symbolSize: 7,
          lineStyle: {
            color: 'rgb(33,148,246)',
            shadowBlur: 12,
            shadowColor: 'rgb(33,148,246,0.9)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
          },
          itemStyle: {
            color: 'rgb(33,148,246)',
            borderWidth: 1,
            borderColor: '#FFF'
          },
          label: {
            show: false,
            distance: 1,
            emphasis: {
              show: true,
              offset: [25, -2],
              // borderWidth:1,
              // borderColor:'rgb(33,148,246)',
              // formatter:'{bg|{b}\n数据量:{c}}',

              color: '#FFF',
              padding: [8, 20, 8, 6],
              // width:60,
              height: 36,
              // formatter: function(params) {
              //   var value = params.data
              //   var str = '订单总量:' + value
              //   return str
              // },
              rich: {
                width: 78,
                // height:42,
                color: '#FFF',
                padding: [20, 0, 20, 10]
              },
              br: {
                width: '100%',
                height: '100%'
              }

            }
          },
          data: Ydata
        }]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
    margin-bottom: 20px;
    h4{
        margin: 0;
    }
    display: flex;
    justify-content: space-between;
    .time{
    font-size: 14px;
    color: #818693;
    display: flex;
    -webkit-box-align: center;
    cursor: pointer;
    }
}
.item{
    width: 45%;
    height: 85px;
    p{
      font-size: 14px;
    margin-bottom: 10px;
    }

    .num{
      width: 79px;
      height: 36px;
      font-size: 32px;
    font-weight: 700;
    color: #e15536;
    cursor: pointer;
    }
  }
  .display{
    margin: 40px auto;
    margin-bottom: 0;
    width: 80%;
    display: flex;
    justify-content: center;
  }
  .area{
    margin: 0 auto;
    width: 100%;
    height: 400px;
  }
</style>
